<template>
    <div>
      <mt-header fixed title="教程详情">
        <router-link to="/" slot="left">
          <mt-button icon="back" @click="$router.back(-1)">返回</mt-button>
        </router-link>
      </mt-header>
      <div class="art-box">
        <div class="video-name">{{video_name}}</div>
        <video :src="video_url" height="300" width="100%" controls="controls" preload>您的浏览器不支持 video 标签。</video>
        <div class="video-des"><span style="font-size:14px">简介：</span>{{video_des}}</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'VideoPage',
  data () {
    return {
      video_url:'',
      video_name:'',
      video_des:''
    }
  },
  created(){
    let video_id = this.$route.query.video_id;  //接受参数关键代码
    this.requestData(video_id);
  },
  methods:{
    requestData(video_id){
      this.$axios.get('getVideoPage',{
        params: {
          video_id: video_id
        }
      })
      .then(res=>{
        this.video_name=res.data.data.video_name;
        this.video_des=res.data.data.video_name;
        this.video_url=res.data.data.video_url;
      })
      .catch(err=>{
        console.log(err);
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .art-box{
    margin-top: 40px;
  }
  .art-box{
    padding: 10px;
  }
  .art-box img{
    width: 100% !important;
    height: auto;
  }
  .video-name{
    height: 42px;
    overflow: hidden;
  }
  .video-des{
    padding: 5px;
    margin-top: 10px;
    min-height: 100px;
    border: 1px solid #eee;
    font-size: 12px;
    color: #333;
  }

</style>
